<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="豆豆">


    <meta name="subtitle" content="愿望是实现睡觉自由">


    <meta name="description" content="你来啦，这里是豆豆的小笔记！">


    <meta name="keywords" content="豆豆,学习,小笔记,睡觉自由">


<title>「Markdown_03」使用Flowchart绘图 | 豆豆的小笔记</title>



    <link rel="icon" href="/favicon.ico">




    <!-- stylesheets list from _config.yml -->
    
    <link rel="stylesheet" href="/css/style.css">
    



    <!-- scripts list from _config.yml -->
    
    <script src="/js/script.js"></script>
    
    <script src="/js/tocbot.min.js"></script>
    



    
    
        
    


<meta name="generator" content="Hexo 4.2.0"></head>
<body>
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="/">豆豆的小笔记</a></div>
            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/archives">归档</a>
                
                    <a class="menu-item" href="/category">分类</a>
                
                    <a class="menu-item" href="/tag">标签</a>
                
                    <a class="menu-item" href="/about">关于</a>
                
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="/">豆豆的小笔记</a><a id="mobile-toggle-theme">·&nbsp;纯白</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; 菜单</div>
            </div>
            <div class="menu" id="mobile-menu">
                
                    <a class="menu-item" href="/archives">归档</a>
                
                    <a class="menu-item" href="/category">分类</a>
                
                    <a class="menu-item" href="/tag">标签</a>
                
                    <a class="menu-item" href="/about">关于</a>
                
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>
        <div class="main">
            <div class="container">
    
    
        <div class="post-toc">
    <div class="tocbot-list">
    </div>
    <div class="tocbot-list-menu">
        <a class="tocbot-toc-expand" onclick="expand_toc()">展开所有</a>
        <a onclick="go_top()">回到顶部</a>
        <a onclick="go_bottom()">到达底部</a>
    </div>
</div>

<script>
    document.ready(
        function () {
            tocbot.init({
                tocSelector: '.tocbot-list',
                contentSelector: '.post-content',
                headingSelector: 'h1, h2, h3, h4, h5',
                collapseDepth: 1,
                orderedList: false,
                scrollSmooth: true,
            })
        }
    )

    function expand_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 6,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "collapse_toc()");
        b.innerHTML = "收起所有"
    }

    function collapse_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 1,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "expand_toc()");
        b.innerHTML = "展开所有"
    }

    function go_top() {
        window.scrollTo(0, 0);
    }

    function go_bottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }

</script>
    

    
    <article class="post-wrap">
        <header class="post-header">
            <h1 class="post-title">「Markdown_03」使用Flowchart绘图</h1>
            
                <div class="post-meta">
                    

                    
                        <span class="post-time">
                        时间： <a href="#">九月 10, 2016&nbsp;&nbsp;22:24:48</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </span>
                    
                    
                        <span class="post-category">
                    分类：
                            
                                <a href="/categories/Markdown/">Markdown</a>
                            
                        </span>
                    
                </div>
            
        </header>

        <div class="post-content">
            <h1 id="安装Flowchart插件"><a href="#安装Flowchart插件" class="headerlink" title="安装Flowchart插件"></a>安装Flowchart插件</h1><ol>
<li><p>在<strong>Git Bash</strong>中输入<code>npm install --save hexo-filter-flowchart</code>。</p>
</li>
<li><p>如果没有特殊要求的话，不需要进行<code>.yml</code>文件的配置。</p>
</li>
<li><p>到这里，我们就可以通过<strong>添加代码块</strong>的方式来绘制图形了，这里要注意，添加的代码块要注明代码类型为<code>flow</code>。</p>
</li>
</ol>
<h1 id="绘制流程图"><a href="#绘制流程图" class="headerlink" title="绘制流程图"></a>绘制流程图</h1><h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><ol>
<li>通用语法示意如下：</li>
</ol>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">tag=&gt;type: content:&gt;url</span><br><span class="line">...</span><br><span class="line">tag1(...) -&gt; tag2(...) -&gt; tag3(...)</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>绘制流程图的代码分为两部分：<ol>
<li>定义元素</li>
<li>连接元素</li>
</ol>
</li>
</ol>
<h2 id="定义元素"><a href="#定义元素" class="headerlink" title="定义元素"></a>定义元素</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">tag=&gt;type: content:&gt;url</span><br></pre></td></tr></table></figure>

<ol>
<li>代码中的元素含义为：<ul>
<li>tag：标签，即元素的名称；</li>
<li>type：元素的类型；</li>
<li>content：元素块中的内容；</li>
<li>url：链接，给元素上添加超链接。</li>
</ul>
</li>
<li>其中元素的类型有六种：<ul>
<li>start</li>
<li>end</li>
<li>operation</li>
<li>subroutine</li>
<li>condition</li>
<li>inputoutput</li>
</ul>
</li>
</ol>
<h2 id="连接元素"><a href="#连接元素" class="headerlink" title="连接元素"></a>连接元素</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">tag1(...) -&gt; tag2(...) -&gt; tag3(...)</span><br></pre></td></tr></table></figure>

<ol>
<li><p>使用<code>-&gt;</code>符号连接两个元素；</p>
</li>
<li><p>对于<code>condition</code>类型的元素，在标签后面用<code>(yes/no)</code>来表示其不同的<strong>分支</strong>；</p>
</li>
<li><p>对于<strong>被连接的</strong>元素，在标签后面用<code>(right/left)</code>来规定其<strong>位置</strong>；</p>
</li>
<li><p>对于<strong>被连接的</strong><code>condition</code>类型的元素，可以用<code>(yes/no, right/left)</code>来同时确定<strong>分支和位置</strong>。</p>
</li>
</ol>
<h2 id="综合效果"><a href="#综合效果" class="headerlink" title="综合效果"></a>综合效果</h2><p>代码如下：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">st=&gt;start: Start|past:&gt;https://hengistyoo.github.io/</span><br><span class="line">e=&gt;end: End:&gt;https://hengistyoo.github.io/</span><br><span class="line">op1=&gt;operation: My Operation|past</span><br><span class="line">op2=&gt;operation: Stuff|current</span><br><span class="line">sub1=&gt;subroutine: My Subroutine|invalid</span><br><span class="line">cond=&gt;condition: Yes</span><br><span class="line">or No?|approved:&gt;https://hengistyoo.github.io/</span><br><span class="line">c2=&gt;condition: Good idea|rejected</span><br><span class="line">io=&gt;inputoutput: catch something...|request</span><br><span class="line"></span><br><span class="line">st-&gt;op1(right)-&gt;cond</span><br><span class="line">cond(yes, right)-&gt;c2</span><br><span class="line">cond(no)-&gt;sub1(left)-&gt;op1</span><br><span class="line">c2(yes)-&gt;io-&gt;e</span><br><span class="line">c2(no)-&gt;op2-&gt;e</span><br></pre></td></tr></table></figure>

<p>效果如下：</p>
<div id="flowchart-0" class="flow-chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js"></script><textarea id="flowchart-0-code" style="display: none">st=>start: Start|past:>https://hengistyoo.github.io/
e=>end: End:>https://hengistyoo.github.io/
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>https://hengistyoo.github.io/
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e</textarea><textarea id="flowchart-0-options" style="display: none">{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}</textarea><script>  var code = document.getElementById("flowchart-0-code").value;  var options = JSON.parse(decodeURIComponent(document.getElementById("flowchart-0-options").value));  var diagram = flowchart.parse(code);  diagram.drawSVG("flowchart-0", options);</script>
        </div>

        
        <section class="post-tags">
            <div>
                <span>标签：</span>
                <span class="tag">
                    
                    
                        <a href="/tags/Markdown/"># Markdown</a>&nbsp;&nbsp;
                    
                        <a href="/tags/%E8%BF%9B%E9%98%B6%E8%AF%AD%E6%B3%95/"># 进阶语法</a>&nbsp;&nbsp;
                    
                        <a href="/tags/Flowchart/"># Flowchart</a>&nbsp;&nbsp;
                    
                        
                </span>
            </div>
            <div>
                <a href="javascript:window.history.back();">返回</a>
                <span>· </span>
                <a href="/">主页</a>
            </div>
        </section>
        <section class="post-nav">
            
                <a class="prev" rel="prev" href="/2017/02/28/linearAlgebra-01/">「线性代数_01」矩阵及其应用</a>
            
            
            <a class="next" rel="next" href="/2016/09/05/markdown-02/">「Markdown_02」使用Mermaid绘图</a>
            
        </section>


    </article>
</div>

        </div>
        <footer id="footer" class="footer">
    <div class="copyright">
        <span>© 豆豆 | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span>
    </div>
</footer>


    <script src='https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js'></script>
    <script>
      if (window.mermaid) {
        mermaid.initialize({theme: 'neutral'});
      }
    </script>
  
    </div>
</body>
</html>
